<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      button.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
      }
      /*   button.accordion:hover {
        background-color: red;
      } */
      button.accordion.active {
        background-color: red;
      }

      div.panel {
        padding: 0 18px;
        background-color: white;

        overflow: hidden;
        transition: max-height 0.2s ease-out;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button class="accordion" @click="handle(1)" :class="{active:active==1}">
        选项 1
      </button>
      <div class="panel" :class="{hide:active !== 1}">
        <p>
          1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>

      <button class="accordion" @click="handle(2)" :class="{active:active==2}">
        选项 2
      </button>
      <div class="panel" :class="{hide:active !== 2}">
        <p>
          2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>

      <button class="accordion" @click="handle(3)" :class="{active:active==3}">
        选项 3
      </button>
      <div class="panel" :class="{hide:active !== 3}">
        <p>3Lorem ipsum dolor sit amet, consectetur adipisic</p>
      </div>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          active: 0,
        },
        methods: {
          handle: function (index) {
            console.log('----', index)
            this.active = index
          },
        },
      })
    </script>
  </body>
</html>
